import PropTypes from 'prop-types';
import React from 'react';

import Badge from './Badge';

function NotificationNavItem({
	subNewNotification,
	subNotificationUpdate,
	notificationUnreadCount,
}) {
	React.useEffect(() => {
		const unsubNewNotify = subNewNotification();
		const unsubNotifyUpdate = subNotificationUpdate();

		return () => {
			unsubNewNotify();
			unsubNotifyUpdate();
		};
	});

	return (
		<Badge count={notificationUnreadCount}>
			<span title="消息">消息</span>
		</Badge>
	);
}

NotificationNavItem.propTypes = {
	className: PropTypes.string,
	notificationUnreadCount: PropTypes.number,
	subNewNotification: PropTypes.func.isRequired,
	subNotificationUpdate: PropTypes.func.isRequired,
};
NotificationNavItem.defaultProps = {
	className: '',
	uid: '',
	notificationUnreadCount: 0,
};

export default NotificationNavItem;
